<template>
  <fieldset>
    <legend>购物车🛒</legend>
    <h2>购物🛒</h2>
    <ul>
      <li v-for="item in Carts" :key="item.id">
        <b>产品:{{ item.title }}</b>
        ----------------
        <b>价格:{{ item.price }}</b>
        ----------------
        <b>数量:{{ item.count }}</b>
        <button @click="del(item)">-</button>
      </li>
    </ul>
    <h1>总价:{{ total }}</h1>
  </fieldset>
</template>
<script>
import { mapState, mapGetters, mapActions } from "vuex";
export default {
  computed: {
    ...mapState("carts", ["Carts"]),
    ...mapGetters("carts", ["total"]),
  },
  methods: {
    del(item) {
      this.COM_RECOVER(item);
      this.CART_REMOVE(item);
    },
    ...mapActions("Products", ["COM_RECOVER"]),
    ...mapActions("carts", ["CART_REMOVE"]),
  },
};
</script>
